@import models.Tables.BlockrangeRow
@(row: BlockrangeRow)
@config.main(row.name) {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>
            .bootstrap-table {
                width: 100% !important;
            }

            .bar_a {
                fill: #000000; /*#FFC100*/
                stroke: #6B6B6B; /*#E7AE00*/
                clip-path: url(#clip);
            }

            .bar_b {
                fill: #000000;
                stroke: #6B6B6B;
                clip-path: url(#clip);
            }

            path {
                fill: grey;
                opacity: 0.5;
                clip-path: url(#clip);
            }

            .textA {
                dominant-baseline: middle;
                clip-path: url(#clip);
                font-size: 12px;
            }

            .textB {
                dominant-baseline: middle;
                clip-path: url(#clip);
                font-size: 12px;
            }

            text {
                dominant-baseline: middle;
            }

    </style>
    <div class="body-box">
        <div class="page-box">

            @config.subTitle(row.name)

            <div class="main-body">


                @components.scrollComponents("Block info") {
                    <table class="table table-bordered table-hover table-striped ">
                        <tbody>
                            <tr>
                                <th>Block ID</th>
                                <td>@row.name</td>
                            </tr>
                            <tr>
                                <th>Organism A</th>
                                <td><a href="/alfalfa/browse/genome/@{
                                    row.querySpecies
                                }" target="_blank">@{
                                    row.querySpecies match {
                                        case "XJDY" => "M. sativa cultivar XinJiangDaYe"
                                        case "ZMNO" => "M. sativa cultivar Zhongmu No. 1"
                                        case "MSAE" => "M. sativa spp. caerulea"
                                        case "MTRU" => "M. truncatula"
                                    }
                                }</a></td>
                            </tr>
                            <tr>
                                <th>Location A</th>
                                <td>@row.query:@row.queryStart-@row.queryEnd</td>
                            </tr>
                            <tr>
                                <th>Organism B</th>
                                <td><a href="/alfalfa/browse/genome/@{
                                    row.refSpecies
                                }" target="_blank">@{
                                    row.refSpecies match {
                                        case "XJDY" => "M. sativa cultivar XinJiangDaYe"
                                        case "ZMNO" => "M. sativa cultivar Zhongmu No. 1"
                                        case "MSAE" => "M. sativa spp. caerulea"
                                        case "MTRU" => "M. truncatula"
                                    }
                                }</a></td>
                            </tr>
                            <tr>
                                <th>Location B</th>
                                <td>@row.ref:@row.refStart-@row.refEnd</td>
                            </tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Data") {
                    <div style="width: 100%">

                        <table id="table" class="table table-bordered" data-pagination="true"
                        data-page-list="[10, 25, 50, 100]"
                        data-advanced-sortable="true">
                            <thead>
                                <tr>
                                    <th data-field='geneA' data-sortable='true' data-search-type="text" data-formatter="GetBlockGeneA">
                                        Gene A</th>
                                    <th data-field='locusA' data-sortable='true' data-search-type="text">Locus A</th>
                                    <th data-field='geneB' data-sortable='true' data-search-type="text" data-formatter="GetBlockGeneB">
                                        Gene B</th>
                                    <th data-field='locusB' data-sortable='true' data-search-type="text">Locus B</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                }

                @components.scrollComponents("Visualization") {
                    <div style="width: 100%;text-align: center">
                        <svg id="svg" width="600" height="800"></svg>
                    </div>
                }


            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/d3.v4.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/display_block.js")" type="text/javascript"></script>


    <script>

            $(function () {

                $.post("@routes.BlockController.getBlockInfo(row.id)", (data) => {

                    $("#table").bootstrapTable({data: data.table});
                    DisplayBlock(data.relate, data.data)
                })


            })

            function GetBlockGeneA(value, row) {
                return `<a href="/alfalfa/browse/gene/${row.idA}" target="_blank">${value}</a>`
            }

            function GetBlockGeneB(value, row) {
                return `<a href="/alfalfa/browse/gene/${row.idB}" target="_blank">${value}</a>`
            }

    </script>
}